<template>
	<div :class="classes.controlBox">
		<span :class="[classes.item, 'colorTextBase', 'colorBgContainer']" v-for="item in list" :key="item.type" @click="handleReact(item)">
			<a-tooltip :position="item.type === 'barrage' ? 'bottom' : 'left'" :content="iconMap[item.type].text">
				<div style="position: relative">
					<a-badge :count="getCount(item)" :offset="[10, -10]" :overflowCount="99" :dot-style="{ backgroundColor: '#1677ff' }">
						<span :class="classes.icon">
							<component v-if="iconMap[item.type].icon != ''" :is="iconMap[item.type].icon" />
							<Icones v-else :icon="iconMap[item.type].html" />
						</span>
					</a-badge>
					<div v-if="showBarrage && item.type === 'barrage'" :class="[classes.barrage, 'colorBgContainer2']" @click="(e) => e.stopPropagation()">
						<a-input v-if="showBarrage" v-model="barrageText" placeholder="温柔的发送弹幕~" />
						<a-button v-if="showBarrage" type="primary">
							<template #icon>
								<icon-send @click="handleSend" />
							</template>
						</a-button>
						<div v-if="!showBarrage">
							发送弹幕前请先登录，
							<a-button type="primary">立即登录</a-button>
						</div>
					</div>
				</div>
			</a-tooltip>
		</span>
		<a-drawer :visible="open" :width="380" title="评论列表" :footer="false" @cancel="onClose" @before-open="handleDrawerBeforOpen">
			<a-scrollbar v-if="showReview" style="width: 330px" :class="classes.scrollbarHei">
				<div>
					<div>
						<a-textarea v-model="reviewText" style="height: 120px; resize: none" placeholder="热心评论" :max-length="100" allow-clear show-word-limit />
						<a-button type="primary" style="margin-top: 16px; border-radius: 4px" size="large" @click="handleReviewSubmit">发布</a-button>
					</div>
					<h3>热门评论</h3>
					<a-list :pagination-props="paginationProps" :data="reviewList">
						<template #item="{ item, index }">
							<a-list-item action-layout="vertical" :key="index">
								<a-list-item-meta :title="item.title">
									<template #avatar>
										<a-avatar shape="square">
											<img alt="avatar" :src="item.avatar" />
										</a-avatar>
									</template>
								</a-list-item-meta>
								<template #description>
									<div>{{ item.content }}</div>
								</template>
								<template #actions>
									<div>{{ item.content }}</div>
								</template>
							</a-list-item>
						</template>
					</a-list>
				</div>
			</a-scrollbar>
			<Empty v-else :text="'您还未登录，登录后即可发布评论'" :backText="'登录'" showBack />
		</a-drawer>
		<Barrage :list="barrageList" />
	</div>
</template>

<script setup lang="ts">
import { IconThumbUp, IconMessage, IconBulb } from "@arco-design/web-vue/es/icon"
import { Modal } from "@arco-design/web-vue"
import { RenderContent } from "@arco-design/web-vue/es/_utils/types"
import { generateRandomNumber } from "@/utils"
import classes from "./bar.module.less"
import { addReview, getReview, addBarrage, getBarrage } from "../../dataModel"
import Barrage from "./Barrage.vue"

const iconMap = {
	like: {
		icon: IconThumbUp,
		text: "喜欢",
		html: "",
	},
	admiration: {
		icon: "",
		text: "赞赏",
		html: "ant-design:transaction-outlined",
	},
	review: {
		icon: IconMessage,
		text: "评论",
		html: "",
	},
	barrage: {
		icon: IconBulb,
		text: "弹幕",
		html: "",
	},
}
export type ControlItem = {
	type: keyof typeof iconMap
	config?: any
}
interface IBarType {
	list?: ControlItem[] | []
	user?: any
	redirectUrl?: string
	params?: any
	onClick?: (type: ControlItem["type"]) => void
}

const props = defineProps<IBarType>()
const emits = defineEmits(["handleBarClick"])
const reviewList = ref([])
const barrageList = ref<any[]>([])
const open = ref<boolean>(false)
const showBarrage = ref<boolean>(false)
const barrageText = ref<string>("")
const reviewText = ref<string>("")
const paginationProps = reactive({
	pageSize: 6,
	onchange: (current: number, pageSize: number) => {},
})
const showReview = ref<boolean>(true)
watch(open, (val) => {
	fetchReviewList()
})

const getCount = (row: ControlItem) => {
	if (row.type === "like") {
		return row.config?.flovers
	}
	if (row.type === "review") {
		return reviewList.value.length
	}
	if (row.type === "barrage") {
		return barrageList.value.length
	}
	return 0
}
const handleReact = (item: ControlItem) => {
	if (item.type === "admiration") {
		const content = h("div", { class: classes.admiration }, [h("img", { src: item.config?.url, alt: "" }), h("p", null, item.config?.text)])
		Modal.success({
			alignCenter: false,
			content: content as unknown as RenderContent,
			okText: "关闭",
		})
		return
	}

	if (item.type === "review") {
		open.value = true
		return
	}

	if (item.type === "barrage") {
		showBarrage.value = !showBarrage.value
		return
	}
	emits("handleBarClick", item.type)
}
const onClose = (e: any) => {
	e.stopPropagation()
	open.value = false
}
// 评论Drawer 打开前
const handleDrawerBeforOpen = () => {
	reviewText.value = ""
}
const fetchBarrageList = () => {
	const res = getBarrage()
	barrageList.value = res.map((v: any, i: number) => ({
		text: v.val,
		id: v.id,
		top: generateRandomNumber([0, 10, 30, 50, 80, 100]),
	}))
}
// 发布评论
const handleReviewSubmit = () => {
	if (reviewText.value) {
		addReview({
			name: `游客${Date.now()}`,
			avatar: ``,
			value: reviewText.value,
		})
		reviewText.value = ""
		fetchReviewList()
		return
	}
}
const fetchReviewList = () => {
	const res = getReview()
	reviewList.value = res.map((v: any, i: number) => {
		return {
			...v,
			title: v.name,
			avatar: v.avatar || `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
			content: v.value,
		}
	})
}
const handleSend = () => {
	if (barrageText.value) {
		const id = Date.now()
		barrageList.value.push({
			id,
			text: barrageText.value,
			top: generateRandomNumber([0, 10, 30, 50, 80, 100]),
		})

		addBarrage({
			id,
			val: barrageText.value,
		})
		barrageText.value = ""
	}
}
onMounted(() => {
	fetchBarrageList()
})
</script>

<style scoped></style>

